<template>
  <div class="wrapper">
    <section v-if="bgData">
      <header-nav :index_num="index_num"></header-nav>
      <div id="box">
        <!-- 内容ONE -->
        <div class="container">
          <!-- 轮播图 -->
          <div class="swiperone">
            <div class="swiper-container swiper-one swiper-no-swiping">
              <div class="swiper-wrapper">
                <template v-for="(banner, index) in bgData.banner">
                  <div class="swiper-slide" :key="index" @click="details(banner.id)">
                    <img :src="banner.cover ? banner.cover : moren" alt />
                    <div class="box">{{ banner.title }}</div>
                  </div>
                </template>
              </div>
              <!-- 如果需要分页器 -->
              <div class="swiper-pagination"></div>
              <!-- 如果需要导航按钮 -->
              <div class="swiper-button-prev swiper-button-white"></div>
              <div class="swiper-button-next swiper-button-white"></div>
            </div>
          </div>

          <!-- 通知公告的box -->
          <div class="right">
            <!-- 通知公告 -->
            <div class="top">
              <div class="b">
                <span>通知公告</span>
                <span class="more" @click="$jParams('newsList', { type: 3 })">更多>></span>
              </div>
            </div>
            <!-- 列表显示 @click="$jParams('newsDetails',{id:notice.id})" -->
            <ul>
              <template v-for="(notice, index) in bgData.notice">
                <li :key="index" v-if="index < 8" @click="details(notice.id)">
                  <a href="javascript:void(0);">
                    <span>{{ notice.title }}</span>
                    <time>[{{ notice.created_at }}]</time>
                  </a>
                </li>
              </template>
            </ul>
          </div>
        </div>
        <!-- TWO -->
        <div class="container-two">
          <p class="title">新闻动态
            <el-button size="small" type="primary"  @click="showDia" style="float: right;margin-right: 0;">问题反馈</el-button>
            <el-dialog title="请填写问题反馈内容" :visible.sync="dialogTableVisibles">
              <p class="problem"><label class="prolabel">组织名称：</label><el-input style="width: 80%;" v-model="society_name" disabled="disabled"></el-input></p>
              <p class="problem"><label class="prolabel">联系人姓名：</label><el-input style="width: 80%;" v-model="name" ></el-input></p>
              <p class="problem"><label class="prolabel">联系人电话：</label><el-input style="width: 80%;" v-model="phone" ></el-input></p>
              <p class="problem"><label class="prolabel">问题反馈详情：</label>
              <el-input style="width: 80%;" v-model="content" ></el-input>
                <!-- <textarea :rows="5" style="width: 80%;border:1px solid #DCDFE6;outline: none;width: 79.4%;" v-model="content" ></textarea> -->
              </p>

              <el-button
                size="small"
                type="primary"
                style="display:block;margin:20px auto;"
                @click="submitProBtn()"
              >提交</el-button>
            </el-dialog>
          </p>
          <div id="boxs">
            <!-- 党组织信息 -->
            <div class="box-child">
              <div class="top-p">
                <div>
                  <img class="o" :src="imgUrl.dh" alt />
                  <span>区域化党建</span>
                </div>
                <span class="more" @click="$jParams('newsList', { type: 4 })">更多>></span>
              </div>
              <ul class="ult">
                <template v-for="(build, index) in bgData.build">
                  <li :key="index" v-if="index < 4" @click="details(build.id)">
                    <a href="javascript:void(0);">{{ build.title }}</a>
                  </li>
                </template>
              </ul>
              <div class="top-p">
                <div>
                  <img class="o" :src="imgUrl.gq" alt />
                  <span>党组织信息</span>
                </div>
                <!-- <span class="more" @click="$jump('informationQuery')">更多>></span> -->
              </div>
              <!-- <ul class="ult">
                <template v-for="(build, index) in bgData.build">
                  <li :key="index" v-if="index < 4" @click="details(build.id)">
                    <a href="javascript:void(0);">{{ build.title }}</a>
                  </li>
                </template>
              </ul>-->
              <div class="p">
                <ul class="ult-t">
                  <template v-for="(party, index) in bgData.party"  >
                    <li :key="index" @click="$jP('dangzuzhixq',{id:party.id})" style="cursor:pointer">
                      <!-- <a href="javascript:void(0);">{{party.party_name}}</a> -->
                      {{ party.party_name }}
                    </li>
                  </template>
                </ul>
                <div class="img" @click="$jump('applyFor')">
                  <div class="img-box">
                    <img :src="imgUrl.wjx" alt />
                    <span>申请成为党组织</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 统一战线 -->
            <div class="box-child">
              <div class="top-p">
                <div>
                  <img class="n" :src="imgUrl.ws" alt />
                  <span>统一战线</span>
                </div>
                <span class="more" @click="$jParams('newsList', { type: 1 })">更多>></span>
              </div>
              <ul class="ulo">
                <template v-for="(battle, index) in bgData.battle">
                  <li :key="index" v-if="index < 9" @click="details(battle.id)">
                    <a href="javascript:void(0);">{{ battle.title }}</a>
                  </li>
                </template>
              </ul>
            </div>
            <!-- 组织生活 -->
            <div class="box-child">
              <div class="top-p">
                <div>
                  <img class="e" :src="imgUrl.zz" alt />
                  <span>组织生活</span>
                </div>
                <span class="more" @click="$jParams('newsList', { type: 2 })">更多>></span>
              </div>
              <ul class="ult">
                <template v-for="(organization, index) in bgData.organization">
                  <li :key="index" v-if="index < 9" @click="details(organization.id)">
                    <a href="javascript:void(0);">{{ organization.title }}</a>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
        <!-- THREE -->
        <div class="container-three">
          <p class="title">@书记</p>
          <div class="btn_ques">
            <el-button size="small" type="primary" @click="dialogTableVisible = true">发布提问</el-button>
            <el-dialog title="请输入问题描述" :visible.sync="dialogTableVisible">
              <textarea :rows="5" placeholder="某某某问题....." v-model="textarea"></textarea>

              <el-button
                size="small"
                type="primary"
                style="display:block;margin:20px auto;"
                @click="submitBtn()"
              >提交</el-button>
            </el-dialog>
          </div>
          <!--发布提问-->
          <div class="box-list">
            <template v-for="(contact, index) in bgData.contact">
              <div class="list" :key="index" v-if="index < 4">
                <img :src="contact.thumb" alt />
                <div class="wen-ben">
                  <h3>{{ contact.society_name }}</h3>
                  <p>{{ contact.content }}</p>
                </div>
              </div>
            </template>
          </div>
        </div>
        <!-- FOUR @click="link(links.link)"-->
        <div class="container-four">
          <p class="title">党建矩阵</p>
          <div class="swiper-box-list">
            <div id="img-box" class="f-row">
              <template v-for="(links, index) in bgData.links">
                <a class="img-box" :key="index" v-if="index < 8" :href="links.link" target="_blank">
                  <img :src="links.url" alt />
                  <p>{{ links.name }}</p>
                </a>
              </template>
              <img
                v-if="leftPos != 0"
                @click="scrollFeeds('left')"
                class="mv-btn left-side"
                :src="imgUrl.left"
                alt
              />
              <img @click="scrollFeeds('right')" class="mv-btn right-side" :src="imgUrl.right" alt />
            </div>
          </div>
        </div>
      </div>
      <footer-nav class="footer"></footer-nav>
    </section>
    <el-button type="primary" v-else></el-button>
    <!-- <div v-if="loading">
      <img id="imgg" src="../../../static/img/loading.gif" alt />
    </div>-->
  </div>
</template>

<script>
import HeaderNav from '../../components/HeaderNav'
import FooterNav from '../../components/FooterNav'
import Swiper from 'swiper'
export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data () {
    return {
      index_num: 0,
      leftPos: 0,
      imgUrl: {
        lb: require('../../../static/img/lb.png'),
        gq: require('../../../static/img/gq.png'),
        ws: require('../../../static/img/ws.png'),
        dh: require('../../../static/img/dh.png'),
        zz: require('../../../static/img/zz.png'),
        wjx: require('../../../static/img/wjx.png'),
        img3: require('../../../static/img/img3.png'),
        right: require('../../../static/img/right.png'),
        left: require('../../../static/img/left.png'),
        moren: require('../../../static/img/default.jpg')
      },
      bgData: [],
      loading: true,
      fullscreenLoading: true,
      textarea: '',
      dialogTableVisible: false,
      dialogTableVisibles: false,
      society_name:sessionStorage.getItem('party_name'),
      sid:sessionStorage.getItem('party_id'),
      content:'',
      name:'',
      phone:''
    }
  },
  computed: {},
  watch: {
    bgData () {
      // this.openFullScreen()
      // setTimeout(() => {
      //   this.loading = false
      // }, 1500);
    }
  },
  methods: {
    showDia(){
      if (!sessionStorage.id) {
        alert('请先登录！')
        this.$jump('login');
      }else{
        this.dialogTableVisibles = true
      }
    },
      statuschange(){
        if(sessionStorage.getItem("party_id")){
          this.$axios({
        url: "v1/news/list?org_id="+sessionStorage.getItem("party_id"),//805
        method: "get",

        // nol: 45,
        // headers: { "Content-Type": "multipart/form-data" },

      }).then(res=>{
        console.log(res.data.data[0],1111)
        if(res.data.code==200){
          if(parseInt(res.data.data[0].status)==0){
            this.$confirm(res.data.data[0].content, "最新消息", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
              }).then(() => {
                  this.$axios({
                    url: "v1/news/du?id="+res.data.data[0].id,
                    method: "get",
                    // nol: 45,
                    // headers: { "Content-Type": "multipart/form-data" },
                  }).then(res=>{
                      console.log(res)
                  })
              })
              .catch(() => {
              this.$message({
                type: "info",
                message: "已取消"
              });
          });
            }
        }else{
      //      this.$message({
      //   type: "error",
      //   message: res.data.data.msg
      // });
        }
      })
        }

  },
    details (id) {
      let routeUrl = this.$router.resolve({
        path: '/newsDetails',
        query: { id: id }
      })
      window.open(routeUrl.href, '_blank')
    },
    openFullScreen () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 200)
    },
    link (href) {
      window.location.href = href
    },
    initSwiper () {
      // eslint-disable-next-line no-new
      new Swiper('.swiper-one', {
        loop: false,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },

        pagination: {
          el: '.swiper-pagination'
        },

        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      })
    },
    scrollFeeds: function (btn) {
      let feeds = document.querySelector('.f-row')
      if (btn === 'left') {
        this.leftPos += 240
        let scrollAmount = 0
        var slideTimer = setInterval(function () {
          feeds.scrollLeft -= 10
          scrollAmount += 10
          if (scrollAmount >= 240) {
            window.clearInterval(slideTimer)
          }
        }, 25)
      } else {
        this.leftPos -= 240
        let scrollAmount = 0
        // eslint-disable-next-line no-redeclare
        var slideTimer = setInterval(function () {
          feeds.scrollLeft += 10
          scrollAmount += 10
          if (scrollAmount >= 240) {
            window.clearInterval(slideTimer)
          }
        }, 25)
      }
    },
    getData () {
      let _this = this
      this.$http({
        method: 'get',
        url: 'v1/index',
        data: {}
      })
        .then(res => {
          console.log(res)
          if (res.data.code === 200) {
            _this.bgData = res.data.data
            console.log(_this.bgData)
            if (_this.bgData.banner.length !== 1) {
              _this.$nextTick(() => {
                // 修改数据之后立即使用这个方法，获取更新后的 DOM
                _this.initSwiper()
              })
            }
          } else {
            _this.$message.error('请求数据有问题！')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    submitBtn (e) {
// this.$http({
//         method: 'get',
//         url: 'user/contact',
//         data: {
//            sid:sessionStorage.getItem("party_id"),
//            society_name:sessionStorage.getItem("party_name"),
//            content:this.textarea
//         }
//       })
      this.$axios({
        url: "v1/user/contact",
        method: "post",
        data: {
          sid:sessionStorage.getItem("party_id"),
           society_name:sessionStorage.getItem("party_name"),
           content:this.textarea
        },
        // nol: 45,
        headers: { "Content-Type": "multipart/form-data" },

      }).then(res=>{
        console.log(res,1111)
        if(res.data.data.code==200){
          this.$message({
            type: "success",
            message: "留言成功"
          });
          this.dialogTableVisible=false
        }else{
           this.$message({
        type: "error",
        message: res.data.data.msg
      });
        }
      })
      console.log(this.textarea.length)
    },
    submitProBtn (e) {
        if(this.name == ''){
          this.$message({
            type: "error",
            message: "请填写联系人姓名"
          });
          return false;
        }
        if(this.phone == ''){
          this.$message({
            type: "error",
            message: "请填写联系人电话"
          });
          return false;
        }
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        console.log('bx',myreg.test((this.phone)))
        if(!myreg.test((this.phone))){
          this.$message({
            type: "error",
            message: "请填写正确的联系人电话"
          });
          return false;
        }
        if(this.content == ''){
          this.$message({
            type: "error",
            message: "请填写反馈内容"
          });
          return false;
        }
        this.$axios({
          url: "v1/user/pcfeedback",
          method: "post",
          data: {
             sid:this.sid,
             society_name:this.society_name,
             content:this.content,
             name:this.name,
             phone:this.phone,
          },
          // nol: 45,
          headers: { "Content-Type": "multipart/form-data" },

        }).then(res=>{
          console.log('卜鑫')
          console.log(res)
          if(res.data.data.code==200){
            this.$message({
              type: "success",
              message: "反馈成功"
            });
            this.dialogTableVisibles=false
          }else{
             this.$message({
          type: "error",
          message: res.data.data.msg
        });
          }
        })
        console.log(this.textarea.length)
      }
  },

  created () {
    this.getData()
    this.statuschange()


  },
  mounted () {
    this.initSwiper()
  }
}
</script>

<style lang="scss" scoped>
#imgg {
  width: 500px;
  height: 600px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.problem{
  margin-bottom:20px
}
.prolabel{
  font-size: 16px;
  display:inline-block;
  width:120px;
  text-align: right;
}

.swiper-wrapper {
  height: auto !important;
  cursor: pointer;
}

.more {
  cursor: pointer !important;
}

li {
  a:hover {
    color: cornflowerblue !important;
  }
  span:hover {
    color: cornflowerblue !important;
  }
}

.wrapper {
  min-width: 1280px;
  box-sizing: border-box;
  position: relative;

  #box {
    width: 1200px;
    padding-top: 40px;
    margin: 0 auto 80px;
    box-sizing: border-box;
    /** FOUR */
    .container-four {
      width: 100%;
      height: 260px;
      padding: 0 40px;
      box-sizing: border-box;
      margin-top: 59px;

      .swiper-box-list {
        width: 100%;
        height: 250px;
        box-sizing: border-box;
        padding: 0 42px 0 0px;
        position: relative;

        .mv-btn {
          cursor: pointer;
          height: 60px;
          width: 60px;
          border-radius: 18px;
          z-index: 20;
          position: absolute;
          &.left-side {
            left: 0px;
            top: 60px;
          }
          &.right-side {
            right: 40px;
            top: 60px;
          }
        }

        #img-box {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: flex-start;
          overflow-y: scroll;

          &::-webkit-scrollbar {
            display: none;
          }

          .img-box {
            width: 239px;
            height: 196px;
            background-color: #ffffff;
            box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.5);
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            margin-right: 20px;

            img {
              width: 239px;
              height: 130px;
              border-radius: 5px 5px 0px 0px;
            }

            p {
              font-family: "MicrosoftYaHei";
              font-size: 18px;
              font-weight: bold;
              font-stretch: normal;
              line-height: 60px;
              letter-spacing: 0px;
              color: #333333;
            }
          }
        }
      }

      .title {
        font-family: "MicrosoftYaHei";
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-bottom: 30px;
      }
    }

    /** THREE */
    .container-three {
      width: 100%;
      padding: 0 40px;
      box-sizing: border-box;
      margin-top: 59px;
      position: relative;

      .box-list {
        width: 100%;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 0 60px 0 8px;

        .list {
          width: 1132px;
          height: 240px;
          box-sizing: border-box;
          padding: 33px 8px 26px 12px;
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid #f8f8f8;
          border-top: 1px solid #f8f8f8;
          background-color: #ffffff;

          &:nth-last-child(1) {
            border-bottom: 0px solid #f8f8f8;
          }

          img {
            width: 300px;
            height: 180px;
            border-radius: 5px;
          }

          .wen-ben {
            width: 763px;

            h3 {
              font-family: "MicrosoftYaHei";
              font-size: 22px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 1px;
              color: #333333;
              margin: 17px 0 36px 0;
            }

            p {
              font-family: MicrosoftYaHei;
              font-size: 18px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 30px;
              letter-spacing: 1px;
              color: #666666;
            }
          }
        }
      }

      .title {
        font-family: "MicrosoftYaHei";
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
        margin-bottom: 30px;
      }
      .btn_ques {
        position: absolute;
        right: 0;
        top: 0;
      }
    }

    /** TWO */
    .container-two {
      width: 100%;
      height: 482px;
      padding: 0 40px;
      box-sizing: border-box;
      margin-top: 59px;

      #boxs {
        width: 100%;
        height: 428px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .box-child {
          width: 365px;
          height: 428px;
          background-color: #ffffff;
          box-shadow: 0px 10px 8px 2px rgba(173, 167, 167, 0.08);
          border-radius: 10px;
          box-sizing: border-box;
          padding: 0 14px;

          .ult-t {
            margin-top: 29px;
            // height: 100px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 3px;
              // height: 5px;
            }

            &::-webkit-scrollbar-track-piece {
              background-color: rgba(0, 0, 0, 0.2);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:vertical {
              height: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            &::-webkit-scrollbar-thumb:horizontal {
              width: 5px;
              background-color: rgba(125, 125, 125, 0.7);
              -webkit-border-radius: 6px;
              border-radius: 6px;
            }

            li {
              a {
                color: #333333;
              }

              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 33px;
              letter-spacing: 0px;
              overflow: hidden;
              -o-text-overflow: clip;
              text-overflow: clip;
              white-space: nowrap;
            }
          }

          .ult {
            margin-top: 29px;

            li {
              a {
                color: #333333;
              }

              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 33px;
              letter-spacing: 0px;
              overflow: hidden;
              -o-text-overflow: clip;
              text-overflow: clip;
              white-space: nowrap;
            }
          }

          .ulo {
            margin-top: 29px;
            width: 321px;
            height: 297px;

            li {
              a {
                color: #333333;
              }

              font-family: "MicrosoftYaHei";
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 33px;
              letter-spacing: 0px;
              overflow: hidden;
              -o-text-overflow: clip;
              text-overflow: clip;
              white-space: nowrap;
            }
          }

          .p {
            margin-top: 19px;

            .img {
              width: 309px;
              display: flex;
              justify-content: flex-end;
              cursor: pointer;

              .img-box {
                width: 131px;
                height: 27px;
                background-image: linear-gradient(
                  35deg,
                  #f82747 0%,
                  #fe5b2c 100%
                );
                border-radius: 25px;
                text-align: center;
                line-height: 27px;
                position: relative;

                img {
                  width: 15px;
                  height: 15px;
                  position: absolute;
                  left: -5%;
                  top: 24%;
                }

                span {
                  font-family: "MicrosoftYaHei";
                  font-size: 14px;
                  font-weight: bold;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #fbfffb;
                  text-shadow: 2px 4px 7px 0px rgba(175, 14, 39, 0.83);
                }
              }
            }

            .ult {
              li {
                a {
                  color: #333333;
                }

                font-family: "MicrosoftYaHei";
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                line-height: 33px;
                letter-spacing: 0px;
                overflow: hidden;
                -o-text-overflow: clip;
                text-overflow: clip;
                white-space: nowrap;
              }
            }
          }

          .top-p {
            width: 100%;
            height: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ccc;

            span {
              font-family: "MicrosoftYaHei";
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: -1px;
              color: #999999;
            }

            div {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .o {
                width: 27px;
                height: 24px;
              }

              .n {
                width: 35px;
                height: 23px;
              }

              .e {
                width: 27px;
                height: 26px;
              }

              span {
                margin-left: 16px;
                font-family: "MicrosoftYaHei";
                font-size: 16px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #666666;
              }
            }
          }
        }
      }

      .title {
        margin-bottom: 30px;
        font-family: "MicrosoftYaHei";
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }
    }

    /** ONE */
    .container {
      width: 100%;
      // padding: 0 40px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .right {
        width: 491px;
        height: 400px;

        ul {
          height: 333px;
          margin-top: 28px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          li {
            width: 491px;

            a {
              display: flex;
              justify-content: space-between;
              align-items: center;

              time {
                font-family: "MicrosoftYaHei";
                font-size: 17px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #999999;
              }

              span {
                display: inline-block;
                width: 329px;
                font-family: "MicrosoftYaHei";
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #333333;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .top {
          border-bottom: 1px solid #ccc;
          padding-bottom: 20px;
          box-sizing: border-box;
          width: 491px;
          height: 40px;
          display: flex;
          align-items: flex-start;

          .b {
            width: 100%;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            & > span:first-child {
              font-family: "MicrosoftYaHei";
              font-size: 24px;
              font-weight: bold;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #333333;
            }

            & > span:last-child {
              font-family: "MicrosoftYaHei";
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 10px;
              letter-spacing: -1px;
              color: #999999;
            }
          }
        }
      }

      .swiperone {
        position: relative;

        .swiper-one {
          width: 660px;
          height: 400px;
          box-sizing: border-box;

          .swiper-slide {
            width: 660px;
            height: 400px;
            position: relative;

            .box {
              width: 660px;
              height: 80px;
              background-color: rgba($color: #000000, $alpha: 0.7);
              position: absolute;
              bottom: 0%;
              left: 0%;
              z-index: 5;
              text-align: center;

              font-family: "MicrosoftYaHei";
              font-size: 20px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 80px;
              letter-spacing: -1px;
              color: #ffffff;
            }

            & > img {
              width: 100%;
              height: 100%;
            }
          }

          .swiper-button-prev {
            position: absolute;
            top: 93%;
            left: 4%;
            width: 13px;
            height: 23px;
            margin-top: -22px;
            z-index: 10;
            cursor: pointer;
            background-size: 13px 23px;
            background-position: center;
            background-repeat: no-repeat;
            outline: none;
          }

          .swiper-button-next {
            position: absolute;
            top: 93%;
            right: 4%;
            width: 13px;
            height: 23px;
            margin-top: -22px;
            z-index: 10;
            cursor: pointer;
            background-size: 13px 23px;
            background-position: center;
            background-repeat: no-repeat;
            outline: none;
          }
        }
      }
    }
  }
  /deep/ .el-button--primary {
    border: none;
    cursor: pointer;
    margin-right: 20px;
    height: 30px;
    border-radius: 4px;
    background-image: linear-gradient(
        69deg,
        #cc263f 0%,
        #f42b47 100%,
        #ed162d 100%,
        #e60012 100%
      ),
      linear-gradient(#e60012, #e60012);
    font-family: "MicrosoftYaHei";
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #ffffff;
  }
  textarea {
    resize: none;
    width: 100%;
  }
}
</style>
